<template>
  <div class="nearby-institutions">
    <div class="header">
      <i class="el-icon-back" @click="goBack"></i>
      <span>附近机构</span>
      <i class="el-icon-location-pin" @click="goToRegionSelector"><van-icon name="location-o" /></i>
    </div>
    <div class="search-area">
      <i class="el-icon-search"></i>
      <input v-model="institutionName" placeholder="搜索机构" />
    </div>
    <ul class="institution-list">
      <li v-if="nearbyInstitutions.length" v-for="(institution, index) in nearbyInstitutions" :key="index">
        <div class="institution-item" @click="goToInstitutionDetail(institution)">
          <img style="width: 70px;height: 70px" :src="institution.imageUrl" alt="机构图标" class="icon" />
          <div class="info">
            <div class="name">{{ institution.institutionName }}</div>
            <div class="address">{{ institution.address }}</div>
            <div class="phone">{{ institution.contactNumber }}</div>
          </div>
          <i class="el-icon-arrow-right"></i>
        </div>
      </li>
    </ul>
    <div v-if="nearbyInstitutions.length === 0 && institutionName === ''">
      <p style="text-align: center; padding: 20px;">未找到附近医院</p>
    </div>
  </div>
</template>

<script>
// // nearby - institutions.vue
import axios from 'axios';

export default {
  data() {
    return {
      institutionName: "",
      nearbyInstitutions: [],
      originalNearbyInstitutions: [],
      name: '',
      id: '',
      debounceTimer: null
    };
  },
  created() {
    //接收名称
    this.name = this.$route.query.regionName;
    console.log(this.name);
  },
  mounted() {
    this.sendLocationToBackend();
  },
  methods: {
    //查询机构名称模糊查询
    searchInstitutions() {
      axios.get(`http://localhost:10086/api/user/medical_institution/getInstitutionsByName?medicalInstitutionName=${this.institutionName}&address=${this.name}`)
        .then(response => {
          this.nearbyInstitutions = response.data;
          console.log(this.nearbyInstitutions);
        })
    },
    goToInstitutionDetail(institution) {
      this.$router.push({name: "institution", query: {institutionId: institution.id}});
      console.log(institution);
    },
    sendLocationToBackend() {
      axios.post(`http://localhost:10086/api/user/medical_institution/getNearbyInstitutions?address=${this.name}`).then(response => {
            this.nearbyInstitutions = response.data;
            console.log(this.nearbyInstitutions);
            this.nearbyInstitutions.forEach(institution => {
              institution.distance = 0;
            });
            this.originalNearbyInstitutions = this.nearbyInstitutions.slice();
          })
          .catch(error => {
            console.error("获取附近机构失败:", error);
          });
    },
    goBack() {
      this.$router.push({ name: "index" })
    },
    goToRegionSelector() {
      this.$router.push({ name: "region" });
    }
  },
  watch: {
    searchQuery(newValue) {
      if (newValue) {
        this.nearbyInstitutions = this.originalNearbyInstitutions.filter(institution =>
            institution.institutionName.includes(newValue)
        );
      } else {
        this.nearbyInstitutions = this.originalNearbyInstitutions.slice();
      }
    },
    institutionName(newValue) {
      if (newValue) {
        this.searchInstitutions();
      } else {
        this.nearbyInstitutions = this.originalNearbyInstitutions.slice();
      }
    }
  }
};
</script>

<style scoped>
.phone {
  margin-left: 20px;
  margin-top: 5px;
}
.address {
  margin-left: 20px;
}
.name {
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 15px;
  margin-left: 20px;
}
.icon {
  height: 100px;
  -o-object-fit: cover;
  object-fit: cover;
  margin-right: 10px;
  margin-top: 20px;
}
.nearby-institutions {
            background-color: #fff;
            height: 100vh;
          }

.header {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  border-bottom: 1px solid #e4e7ed;
}

.header i {
  font-size: 20px;
}

.header i:nth-of-type(1) {
  margin-right: 10px;
}

.header i:nth-of-type(3) {
  margin-left: auto;
}

.search-area {
            display: flex;
            align-items: center;
            height: 40px;
            padding: 0 15px;
            background-color: #f4f4f4;
            margin-top: 10px;
            border-radius: 5px;
          }

.search-area i {
            font-size: 18px;
            margin-right: 10px;
          }

.search-area input {
            flex: 1;
            border: none;
            background-color: transparent;
            outline: none;
          }

.institution-list {
                 list-style: none;
                 padding: 0;
                 margin-top: 20px;
                 height: auto;
                 width: 100%;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
               }

.institution-item {
                 display: flex;
                 align-items: center;
                 padding: 15px;
                 border-bottom: 1px solid #e4e7ed;
                 width: 350px;
                 margin-top: 20px;
               }

.institution-item.icon {
                 width: 70px;
                 height: 70px;
                 margin-right: 15px;
               }

.institution-item.info {
                 flex: 1;
               }

.institution-item.info.name {
                 font-size: 16px;
                 margin-bottom: 5px;
               }

.institution-item.info.distance {
                 font-size: 14px;
                 color: #999;
               }

.institution-item i {
                 font-size: 20px;
                 margin-left: auto;
               }

/* 避免使用自动生成的哈希值类名 */
.header i {
  font-size: 30px;
}
</style>